﻿@inherits MasaComponentBase

<SSheetDialog EnableDomReload Value="Value" ValueChanged="SheetDialogValueChanged" Title="@T("Relation public config")" Icon="mdi-circle" IconColor="success">
    <div class="d-flex flex-column" style="width:100%; height:100%; padding: 48px 228px; overflow: hidden;">
        <div class="full-height" style="overflow: auto;">
            <div class="emphasis--text h6 d-flex align-center">
                @AppDetail.Name
                <span class="ml-3 regular3--text btn">|</span>
                <sapn class="ml-2 regular3--text btn">@AppDetail.Identity</sapn>
            </div>
            <p class="neutral--text mt-12" style="font-size:14px; font-weight:700;">@T("Need associated cluster")</p>
            <MChipGroup Multiple Column @bind-Values="_selectToEnvClusterIds">
                @foreach (var item in AppDetail.EnvironmentClusters)
                {
                    <MChip Value="item.Id" Large Class="envClusterChip mr-6 mb-6 m-chip--envcluster" Filter Outlined Style=@($"border-color:{item.EnvironmentColor};color:{item.EnvironmentColor}")>
                        <div style="@($"color: {item.EnvironmentColor} !important")">@item.EnvironmentName</div>
                        <span class="split--text">&nbsp; | &nbsp;</span>
                        <div class="emphasis2--text">@item.ClusterName</div>
                    </MChip>
                }
            </MChipGroup>
            <p class="neutral--text mt-12" style="font-size:14px; font-weight:700;">@T("Select public config object")</p>
            <MRow NoGutters Class="mb-6">
                <MCol>
                    <SSelect Value="_selectFromEnvClusterId"
                             ValueChanged="SelectEnvClusterValueChanged"
                             Class="pr-3"
                             TValue="int"
                             TItemValue="int"
                             TItem="EnvironmentClusterModel"
                             Label="@T("Environment cluster")"
                             MenuProps="props => props.OffsetY = true"
                             Outlined
                             Items="_allEnvClusters"
                             ItemText="l=>l.EnvironmentClusterName"
                             ItemValue="l=>l.Id">
                    </SSelect>
                </MCol>
                <MCol>
                    <SSelect Value="_selectPublicConfigObjectId"
                             ValueChanged="SelectConfigObjectValueChanged"
                             Class="pl-3"
                             TValue="int"
                             TItemValue="int"
                             TItem="ConfigObjectDto"
                             Label="@T("Public config object")"
                             MenuProps="props => props.OffsetY = true"
                             Outlined
                             Dense
                             Items="_publicConfigObjects"
                             ItemText="l=>l.Name"
                             ItemValue="l=>l.Id">
                    </SSelect>
                </MCol>
            </MRow>
            @if (_selectConfigObject.FormatLabelCode.Trim().ToLower() == "properties")
            {
                <div style="border-radius: 8px; border: 1px solid #E2E7F4;">
                    <MRow Style="color: #A3AED0; font-size: 14px; margin:12px 24px;" NoGutters Align="AlignTypes.Center">
                        <span style="width: 5%">@T("State")</span>
                        <span style="width: 47.5%">Key</span>
                        <span style="width: 47.5%">Value</span>
                    </MRow>
                    <MDivider Class="mt-3"></MDivider>
                    @foreach (var item in _selectConfigObject.ConfigObjectPropertyContents)
                    {
                        <MRow Class="my-3 mx-6" NoGutters Justify="JustifyTypes.SpaceBetween" Align="AlignTypes.Center">
                            @if (item.IsRelationed)
                            {
                                <SIcon Class="d-flex justify-start" Style="width: 5%" Color="#7681AB">mdi-link-variant</SIcon>
                            }
                            else
                            {
                                <SIcon Class="d-flex justify-start" Style="width: 5%" Color="#7681AB">mdi-link-variant-off</SIcon>
                            }
                            <div style="width: 47.5%">@item.Key</div>
                            <STextField style="width: 47.5%" HideDetails="true" Outlined TValue="string" Value="item.Value" ValueChanged="value=>PropertyValueChanged(value,item)"></STextField>
                        </MRow>
                    }
                </div>
            }
            else
            {
                if (_isRelation)
                {
                    <SIcon Size="18" Color="#7681AB" IsDefaultToolTip="false">mdi-link-variant</SIcon>
                    <span style="color: #7681AB; font-size: 14px;">@T("Connected")</span>
                }
                else
                {
                    <SIcon Size="18" Color="#7681AB" IsDefaultToolTip="false">mdi-link-variant-off</SIcon>
                    <span style="color: #7681AB; font-size: 14px;">@T("Covered")</span>
                }
                <MTextarea Class="mt-3" Dense Outlined Value="@_selectConfigObject.Content" ValueChanged="value=>ContentValueChanged(value,_selectConfigObject)"></MTextarea>
            }
        </div>
        <div class="d-flex justify-end align-end" style="width:100%;">
            <SButton Small Color="primary" OnClick="HandleOnSubmitAsync">@T("Submit")</SButton>
        </div>
    </div>
</SSheetDialog>
